<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>测试DocumentFragment</title>
  </head>
  <body>
    <div id="test"></div>

    <script>
      const testDiv = document.getElementById('test')

      const h1 = document.createElement('h1')
      h1.innerHTML = '我是标题'
      const p = document.createElement('p')
      p.innerHTML = '我是内容'

      // fragment是内存中容器节点, 但不生成任何标签
      const fragment = document.createDocumentFragment()
      fragment.appendChild(h1)
      fragment.appendChild(p)

      testDiv.appendChild(fragment)

    </script>
  </body>
</html>